<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style1.css">
	<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<input type="button" name="last" value="last" onclick="last(this)">
	<input type="button" name="next" value="next" onclick="next(this)">
	<input type="button" name="循环" value="循环" onclick="xunhuan(this)">
	<input type="button" name="0" value="1">
	<input type="button" name="1" value="2">
	<input type="button" name="2" value="3">
	<input type="button" name="3" value="4">
	<div id="box">
		<div id="mid">
			<div class="index">1</div>
			<div class="index">2</div>
			<div class="index">3</div>
			<div class="index">4</div>
			<div class="index">1</div>		
		</div>
	</div>
</body>
	<script>

	var xunhuanBtn = document.querySelector('input[value=循环]');
	xunhuanBtn.open = 'false';
	var timer;
	var move = 0;


	var mid = document.getElementById('mid');
	var maxWidth = mid.offsetWidth;

	var divs = mid.getElementsByTagName('div');
	for (var i = 0; i < divs.length; i++) {
		divs[i].index = i;
	}

	var inputs = document.getElementsByTagName('input');
	for (var i = 0; i < inputs.length; i++) {
		for (var j = 0; j < divs.length; j++) {
			if (inputs[i].name == divs[j].index.toString()) {
				inputs[i].onclick = function(){
					clearInterval(timer);
					xunhuanBtn.open = 'false';
					var star = mid.offsetLeft;
					var end = new Number(this.name) * -300;
					var change = end - star;
					var maxT = 10;
					var t = 0;
					timer = setInterval(function(){
						t++;
						if (t >= maxT) {
							clearInterval(timer);
						}
						mid.style.left = Tween.Bounce.easeOut(t,star,change,maxT) + 'px';
					},30);
				}
			}
		}
	}

	function xunhuan(who){
		clearInterval(timer);
		move = mid.offsetLeft;
		if (who.open == "false") {
			timer = setInterval(function(){
							move -= 5;
							if (move <= -maxWidth + 300) {
								move = 0;
							}
							mid.style.left = move + 'px';
						},30);
			who.open = 'true';
		}else{
			clearInterval(timer);
			who.open = 'false';
			next();
		}
	}

	function last(who){
		if (mid.offsetLeft >= 0) {
			mid.style.left = '-1200px';
		}
		clearInterval(timer);
		xunhuanBtn.open = 'false';
		var star = mid.offsetLeft;
		var end = star % 300;
		var change = -end;
		if (change == 0) {
			change = 300;
		}
		console.log(star);
		console.log(end);
		console.log(change);
		var maxT = 10;
		var t = 0;
		timer = setInterval(function(){
			t++;
			if (t >= maxT) {
				clearInterval(timer);
			}
			mid.style.left = Tween.Bounce.easeOut(t,star,change,maxT) + 'px';
		},30);
	}

	function next(who){
		if (mid.offsetLeft <= -1200) {
			mid.style.left = '0px';
		}
		clearInterval(timer);
		xunhuanBtn.open = 'false';
		var star = mid.offsetLeft;
		var end = star % 300;
		var change = -300 - end;
		if (change == 0) {
			change = -300;
		}
		var maxT = 10;
		var t = 0;
		timer = setInterval(function(){
			t++;
			if (t >= maxT) {
				clearInterval(timer);
			}
			mid.style.left = Tween.Bounce.easeOut(t,star,change,maxT) + 'px';
		},30);
	}

	</script>
</html>